import {messages} from "share/common";
import React from 'react'
import {connect} from 'react-redux'
import { Tabs } from 'antd';
import Condition from 'components/condition';
import NewBilling from 'containers/financial-management/wait-for-billing/new-billing/new-billing';
import WaitForBillingList from 'containers/financial-management/wait-for-billing/wait-for-billing-list';
const If = Condition.If;
const TabPane = Tabs.TabPane;

class WaitForBillingTab extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      status: props.billingTab ? props.billingTab : 'wait',
      tabs: [
        {name: messages('financial-management.key680')/*待开票*/, key: 'wait'},
        {name: messages('financial-management.key681')/*已开票*/, key: 'done'}
      ],
      billingType: JSON.stringify(props.billingType) !== "{}" ? props.billingType : props.params.billingType,
    }
  }

  onChangeTabs = key => {
    this.setState({status: key});
  };

  renderTabs = () => {
    return (
      this.state.tabs.map(tab => {
        return <TabPane tab={tab.name} key={tab.key}/>;
      })
    )
  };

  render(){
    const { status, billingType } = this.state;
    return(
      <div>
        <Tabs type="card" onChange={this.onChangeTabs} defaultActiveKey={status}>
          {this.renderTabs()}
        </Tabs>
        <If value={status === 'wait'}>
          <NewBilling billingType={billingType}/>
        </If>
        <If value={status === 'done'}>
          <WaitForBillingList billingType={billingType}/>
        </If>
      </div>
    )
  }
}

function mapStateToProps(state){
  return {
    billingType: state.billing.billingType,
    billingTab: state.billing.billingTab
  }
}

export default connect(mapStateToProps)(WaitForBillingTab);
